<template>
  <div>
    <el-dialog
      title="编码"
      :visible="visible"
      width="60%"
      top="5vh"
      @close="visible = false"
      :close-on-click-modal="false"
    >
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="options" name="options">
          <div style="height:60vh;">
            <javascriptEditor
              height="100%"
              ref="optionsEditor"
              theme="vs"
              :value="value.customerOptions.options "
            ></javascriptEditor>
          </div>
        </el-tab-pane>
        <el-tab-pane label="head" name="head">
          <div style="height:60vh;">
            <javascriptEditor
              height="100%"
              ref="headEditor"
              theme="vs"
              :value="value.headLinks"
            ></javascriptEditor>
          </div>
        </el-tab-pane>
        <el-tab-pane label="body" name="body"
          ><div style="height:60vh;">
            <javascriptEditor
              height="100%"
              language="html"
              theme="vs"
              ref="bodyEditor"
              :value="value.htmlbody"
            ></javascriptEditor></div
        ></el-tab-pane>
        <el-tab-pane label="script" name="script"
          ><div style="height:60vh;">
            <javascriptEditor
              height="100%"
              theme="vs"
              ref="scriptEditor"
              :value="value.codes"
            ></javascriptEditor></div
        ></el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="confirm" size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import javascriptEditor from "@/components/javascriptEditor";

export default {
  components: { javascriptEditor },
  props: {
    value: {
      id: 1
    }
  },
  watch: {},
  model: {
    prop: "value",
    event: "change"
  },
  data() {
    return {
      loading: false,
      visible: false,
      defaultLabelWidth: "150px",
      activeName: "first",
      form: {
        name: ""
      },
      rules: {
        name: [{ required: true, message: "请输入", trigger: "change" }]
      }
    };
  },
  methods: {
    confirm() {
      this.commit();
    },
    show(value) {
      debugger
      this.activeName = value || "first";
      this.visible = true;
      
      this.loadData(this.value);
    },
    hide() {
      this.visible = false;
      this.form = {
        name: ""
      };
    },
    loadData(value) {
      this.loading = true;
      if (
        this.$refs.optionsEditor &&
        this.$refs.headEditor &&
        this.$refs.bodyEditor &&
        this.$refs.scriptEditor
      ) {
        this.$refs.optionsEditor.setValue(this.value.customerOptions.options);
        this.$refs.headEditor.setValue(this.value.headLinks);
        this.$refs.bodyEditor.setValue(this.value.htmlbody);
        this.$refs.scriptEditor.setValue(this.value.codes);
      }

      this.loading = false;
    },
    commit() {
      const _this = this;
      debugger
      this.value.customerOptions.options = this.$refs.optionsEditor.getValue();
      this.value.headLinks = this.$refs.headEditor.getValue();
      this.value.htmlbody = this.$refs.bodyEditor.getValue();
      this.value.codes = this.$refs.scriptEditor.getValue();

      this.hide();
    }
  }
};
</script>

<style></style>
